巢狀結構 Nesting 是什麼？

• 指將 CSS 規則寫在另一個 CSS 規則的內部，以表示它們之間的層級關係
• 使得 CSS 樣式的結構更加直觀，尤其是處理巢狀的 HTML 元素時，巢狀結構能夠更清晰地表達樣式之間的層次

巢狀屬性（Nested Properties）是什麼？

• 是 Sass提供的一種語法糖，允許將一個屬性組織在一起，例如將 border 或 font 的屬性部分以巢狀方式寫在一起，而不是分散地寫多行樣式

巢狀結構的優點

• 可讀性更高：讓樣式與 HTML 結構對應更加明確，便於理解
• 減少冗餘：避免了在 CSS 中多次重複使用父選擇器名稱，減少冗長的程式碼
• 層次關係清晰：清楚的表現出不同元素之間的層次關係，特別適合處理巢狀的 HTML 結構
• 便於維護：當 HTML 結構發生變化時，相關樣式集中在一起，便於修改

Sass 中的巢狀規則

• 根據 HTML 結構進行巢狀規則的設置
• 一般使用選擇器巢狀來表示 CSS 規則的繼承關係
• 巢狀可以提高程式碼的可讀性